<template>
  <el-drawer v-model="drawer" size="50%" :title="tableName" direction="rtl">
    <el-table ref="dragTable" :data="columns" row-key="index">
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column
        label="字段列名"
        prop="columnName"
        min-width="10%"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="字段描述"  align="center" prop="columnComment" min-width="10%" />
      <el-table-column
        label="物理类型"
        prop="dataType"
        align="center"
        min-width="10%"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="字段长度"
        prop="characterLength"
        align="center"
        min-width="10%"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="是否为空"
        prop="isnNullAble"
        align="center"
        min-width="10%"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="默认值"
        prop="columnDefault"
        align="center"
        min-width="10%"
        :show-overflow-tooltip="true"
      >
        <template #default="scope">
          {{ scope.row.columnDefault ? scope.row.columnDefault : "-" }}
        </template>
      </el-table-column>
    </el-table>
  </el-drawer>
</template>

<script setup>
import { getInfoByTableName } from "@/api/tool/db-doc";
import _ from "lodash";
const drawer = ref(false);
const tableName = ref();
const columns = ref([]);
const open = async (value,tableSchema, name, comment) => {
  const res = await getInfoByTableName({ tableSchema, tableName: name });
  columns.value = res.data.columns;
  drawer.value = value;
  tableName.value = _.join([name,comment].filter(item => item && item.trim()), '-');
};

const close = () => {
  drawer.value = false;
};
defineExpose({ open, close });
</script>
